<template>
	<view class="health-container">
		<u-navbar bgColor="#1A1A1A" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="right">
				<!-- 正文内容 -->
				<text @click="submit">完成</text>
			</view>
		</u-navbar>
		<!-- 头像区域 -->
		<view class="health-avtar">
			<u-avatar :src="src" size="90"></u-avatar>
		</view>
		<!-- 用户表单区域 -->
		<view class="health-form">
			<u-form labelPosition="top" :model="healthForm" ref="healthFormRef">
				<u-form-item label="体重(kg)" prop="weight">
					<u--input type="number" v-model="healthForm.weight" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入体重"></u--input>
				</u-form-item>
				<u-form-item label="身高(cm)" prop="height">
					<u--input type="number" v-model="healthForm.height" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入身高"></u--input>
				</u-form-item>
				<u-form-item label="腰围(cm)" prop="waist">
					<u--input type="number" v-model="healthForm.waist" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入腰围"></u--input>
				</u-form-item>
				<u-form-item label="臀围(cm)" prop="hipline">
					<u--input type="number" v-model="healthForm.hipline" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入臀围"></u--input>
				</u-form-item>
				<u-form-item label="胸围(cm)" prop="chest">
					<u--input type="number" v-model="healthForm.chest" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入胸围"></u--input>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		TOAST
	} from "@/utils/utils.js"
	import {
		health
	} from "@/api/my.js"
	export default {
		data() {
			return {
				src: "../../static/imgs/user-avtar.png",
				healthForm: {},
				userId: ""
			};
		},
		created() {
			this.userId = uni.getStorageSync("userId")
			const health=sessionStorage.getItem("body")
			if(health) this.healthForm=JSON.parse(health)
		},
		methods: {
			submit() {
				health({
					chest: this.healthForm.chest,
					height: this.healthForm.height,
					hipline: this.healthForm.hipline,
					userId: this.userId,
					waist: this.healthForm.waist,
					weight: this.healthForm.weight
				}).then(res => {
					if (res.code === 200) {
						TOAST("添加成功")
					}
					sessionStorage.setItem("body", JSON.stringify(this.healthForm))
					this.$refs.healthFormRef.resetFields()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.placeholderClass {
		text-align: center;
	}

	/deep/.u-input {
		background-color: #000000;
	}

	.health-container {
		height: 100%;
		background-color: #1A1A1A;
		overflow-y: auto;
		padding: 0 80rpx;

		.u-nav-slot {
			font-weight: 400;
			font-size: 40rpx;
		}

		.health-avtar {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
